<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self'; img-src * 'self' data: content:">
    <link rel="stylesheet" href="./static/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="./static/css/bootstrap-colorpicker.min.css" type="text/css">
    <link ref="stylesheet" href="./static/css/fix-main.css" type="text/css">
    <title>PDF工具箱</title>
</head>

<body class="m-3">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                aria-controls="pills-home" aria-selected="true">添加水印</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-merge-tab" data-toggle="pill" href="#pills-merge" role="tab"
                aria-controls="pills-merge" aria-selected="false">合并文件</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-split-tab" data-toggle="pill" href="#pills-split" role="tab"
                aria-controls="pills-split" aria-selected="false">文件分割</a>
        </li>
        <li class="nav-item" id="float_right">
            <a class="nav-link" id="pills-about-tab" data-toggle="pill" href="#pills-about" role="tab"
                aria-controls="pills-about" aria-selected="false">关于</a>
        </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
            <div class="row form-group">
                <div class="input-group col-sm-12">
                    <input type="text" id="choise_file" name="choise_file" class="form-control"
                        placeholder="请选择要加水印的文件：" aria-label="请选择要加水印的文件：" aria-describedby="wm_choise">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="wm_choise">选择</button>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row form-group">
                        <div class="col-sm-6">
                            <label for="wm_size">字体：</label>
                            <select class="custom-select d-block" id="wm_font" name="wm_font"></select>
                        </div>
                        <div class="col-sm-6">
                            <label for="wm_size">字体尺寸：</label>
                            <input type="number" class="form-control" id="wm_size" name="wm_size" value="24">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="form-group col-sm-4">
                            <label for="wm_x">水印排列样式：</label>
                            <p></p>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="wm_style" id="wm_style1"
                                    value="center">
                                <label class="form-check-label" for="inlineRadio1">居中</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="wm_style" id="wm_style2" value="tile"
                                    checked>
                                <label class="form-check-label" for="inlineRadio2">平铺</label>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <label for="wm_x">左边距：</label>
                            <input type="number" class="form-control" id="wm_x" name="wm_x" value="20">
                        </div>
                        <div class="col-sm-2">
                            <label for="wm_y">下边距：</label>
                            <input type="number" class="form-control" id="wm_y" name="wm_y" value="20">
                        </div>
                        <div class="col-sm-2">
                            <label for="wm_h">水印行数：</label>
                            <input type="number" class="form-control" id="wm_h" name="wm_h" value="10">
                        </div>
                        <div class="col-sm-2">
                            <label for="wm_l">水印列数：</label>
                            <input type="number" class="form-control" id="wm_l" name="wm_l" value="5">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-4">
                            <label for="wm_dg">旋转角度</label>
                            <input type="number" class="form-control" id="wm_dg" name="wm_dg" value="45">
                        </div>
                        <div class="col-sm-4">
                            <label for="wm_txt">水印文字：</label>
                            <input type="text" class="form-control" id="wm_txt" name="wm_txt" value="水印">
                        </div>
                        <div class="col-sm-4" id="colorpicker">
                            <label for="wm_color">文字颜色</label>
                            <input type="text" class="form-control wm-color" id="wm_color" name="wm_color"
                                value="rgba(255, 18, 0, 0.7)" readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row form-group"></div>
            <div class="row form-group">
                <div class="input-group col-sm-12">
                    <input type="text" id="saved_file" name="saved_file" class="form-control" placeholder="保存文件路径："
                        aria-label="保存文件路径：" aria-describedby="wm_schoise">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="wm_schoise">选择</button>
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-sm-12">
                    <button type="button" class="form-control btn btn-primary" id="add_water">添加水印</button>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-merge" role="tabpanel" aria-labelledby="pills-merge-tab">
            <div class="row form-group">
                <div class="input-group col-sm-12">
                    <input type="text" id="merge_file" name="merge_file" class="form-control" placeholder="请选择要合并的文件："
                        aria-label="请选择要合并的文件：" aria-describedby="merge_choise">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="merge_choise">添加文件</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="merge_list">合并的文件列表<span class="badge badge-primary badge-pill"
                        id="mergn_list_count">0</span></label>
                <select multiple class="form-control" id="merge_list" size="9"></select>
            </div>
            <div class="form-group">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="" id="remove_repeat">
                    <label class="form-check-label" for="remove_repeat">
                        智能去除重复的页
                    </label>
                </div>
                <div class="form-group form-check-inline">
                    <button class="btn btn-outline-secondary" type="button" id="merge_remove_sel">删除选择的</button>
                </div>
            </div>
            <div class="row form-group">
                <div class="input-group col-sm-12">
                    <input type="text" id="merge_sfile" name="merge_sfile" class="form-control" placeholder="保存文件路径："
                        aria-label="保存文件路径：" aria-describedby="merge_schoise">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="merge_schoise">选择</button>
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-sm-12">
                    <button type="submit" class="form-control btn btn-primary" id="merge_files">合并文件</button>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-split" role="tabpanel" aria-labelledby="pills-split-tab">
            <div class="row form-group">
                <div class="input-group col-sm-12">
                    <input type="text" id="split_file" name="split_file" class="form-control" placeholder="请选择要分割的文件："
                        aria-label="请选择要分割的文件：" aria-describedby="split_choise">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="split_choise">添加文件</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="split_list">当前文件总页数：<span class="badge badge-primary badge-pill"
                        id="split_pagecount">0</span></label>
            </div>
            <div class="btn-toolbar mb-3 justify-content-between row" role="toolbar"
                aria-label="Toolbar with button groups">
                <div class="input-group col-sm-6">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="">从第 </span>
                    </div>
                    <input type="number" id="split_range_start" name="split_range_start" class="form-control">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="">页到第 </span>
                    </div>
                    <input type="number" id="split_range_end" name="split_range_end" class="form-control">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="">页</span>
                    </div>
                </div>
                <div class="btn-group col-sm-6" role="group" aria-label="First group">
                    <button class="btn btn-outline-secondary" type="button" id="split_add_range">添加范围</button>
                    <button class="btn btn-outline-secondary" type="button" id="split_remove_sel">删除选择</button>
                    <button class="btn btn-outline-secondary" type="button" id="split_add_single">分成单页</button>
                    <button class="btn btn-outline-secondary" type="button" id="split_remove_ht">去除首尾</button>
                </div>
            </div>
            <div class="from-group">
                <label for="merge_list">分割范围</label>
                <select multiple class="form-control" id="split_list" size="8"></select>
            </div>
            <div class="row form-group">
                <div class="input-group col-sm-12">
                    <input type="text" id="split_sfile" name="split_sfile" class="form-control" placeholder="保存文件路径："
                        aria-label="保存文件路径：" aria-describedby="split_save_choise">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="split_save_choise">选择</button>
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-sm-12">
                    <button type="submit" class="form-control btn btn-primary" id="split_files">分割文件</button>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-about" role="tabpanel" aria-labelledby="pills-about-tab">
            <div class="row m-1">
                <div class="col-sm-6">
                    <div class="card">
                        <h5 class="card-header">开源组件</h5>
                        <div class="card-body">
                            <p class="card-text">@pdf-lib/fontkit": "^1.1.1"</p>
                            <p class="card-text">"bootstrap": "^v4.6.2"</p>
                            <p class="card-text">"bootstrap-colorpicker": "^v3.2.0"</p>
                            <p class="card-text">"jquery": "^3.7.1"</p>
                            <p class="card-text">"pdf-lib": "^1.17.1"</p>
                            <p class="card-text">"winreg": "^1.2.5"</p>
                            <p class="card-text">"@electron-forge/cli": "^6.4.2"</p>
                            <p class="card-text">"electron": "^27.0.4"</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card">
                        <h5 class="card-header">联系方式</h5>
                            <div class="card-body">
                                <p class="card-text">黄朝勋：15970153299</p>
                                <p class="card-text">&nbsp;</p>
                                <p class="card-text">&nbsp;</p>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="./fix-jquery.js"></script>
    <script src="./static/js/jquery-3.7.1.min.js"></script>

    <script src="./static/js/bootstrap.bundle.min.js"></script>
    <script src="./static/js/bootstrap-colorpicker.min.js"></script>

    <script src="./renderer.js"></script>
</body>

</html>